
let wH = window.innerHeight,
	wW = window.innerWidth,
	c = "active";
(function () {
	/* gsap 从下网上覆盖 */
	function gasp_cover() {
		if(wW > 990 ){
			var elements = [...document.getElementsByClassName("gasp_cover")];
			elements.forEach(function(e){
				var _this = e;
				let tl = gsap.timeline({ 
					scrollTrigger: { 
						trigger: _this, pin: true, start: 'top top', end: 'bottom top', pinSpacing: false, scrub: .3, 
						// markers: {startColor: '#FF0000', endColor: '#FF0000', fontSize: '18px', fontWeight: 'bold', indent: 20}, 
					} 
				});
				tl.to(_this, { y: "-10%", })
				.to( _this,{ scale: 1, },"<")
			})
		}
	}
	gasp_cover();

	/* gsap 宽度变化 */
	function gasp_width(){
		var elements = [...document.getElementsByClassName("gasp_width")];
		elements.forEach(function(e){
			var _this = e;
			let tl = gsap.timeline({ 
				scrollTrigger: { 
					trigger: _this, pin: false, start: 'top bottom', end: 'top center', scrub: .3, 
					// markers: {startColor: '#FF0000', endColor: '#FF0000', fontSize: '18px', fontWeight: 'bold', indent: 20}, 
				} 
			});
			tl.fromTo(_this, { scale: 0.9, },{ scale: 1, })
		})
	}
	gasp_width();

	/* gsap 文字挨个出现 */
	const textElements = gsap.utils.toArray('.ani-text');
	textElements.forEach((item, idx) => {
		item.classList.add('ani-init', 'is-show');
		Array.from(item.innerHTML).forEach((text, i) => {
			if(i === 0) item.innerHTML = '';
			text = text != ' ' ? `<span class="c-text" style="transition-delay: ${2 * i / 100}s"><span style="transition-delay: ${2 * i / 100}s">${text}</span></span>` : '<br />';
			item.insertAdjacentHTML('beforeend', text);
		})
		ScrollTrigger.create({
			trigger: item,
			start: 'top bottom',
			end: 'top top',
			scrub: true,
			/* markers: {startColor: "red", endColor: "red", fontSize: "18px", fontWeight: "bold", indent: 20}, */
			onLeaveBack: () => {
				item.classList.add('ani-init');
				item.classList.remove('is-view');
			},
			onEnter: () => {
				item.classList.remove('ani-init');
				item.classList.add('is-view');
			}
		})
	});

})();